<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="myapp">
        <h1>count {{count}}</h1>
    </div>
</body>
<script>
    // 定义组件
    const app = {
        // data 是一个函数 组件创建时调用以构建数据系统
        data() {
            return {
                count: 0,
            }
        },
        methods: {
            add(num = 1) {
                // 创建方法时可以放心地使用this来访问组件内部的数据
                this.count += num;
            }
        }
    };
    //创建组件并获取实例
    let instance = Vue.createApp(app).mount("#myapp");
    //通过实例获取到组件中的data数据
    // 本质上数据是存储在实例中的data对象内,但是vue在组织数据时,任何定义的属性都会暴露在组件中
    // 以下两种方法访问到的是同一块空间
    alert(instance.count);
    alert(instance.$data.count);
    alert(instance.count = 6);
    alert(instance.$data.count);
    // 在实际开发中也可以动态的向组件中添加属性,但是这种方式添加的属性不能被响应式系统跟踪,其变化无法同步到页面元素中

    // 除了绑定到html元素上(如@click),也可以直接通过组件实例来调用方法
    instance.add(11);
</script>